<template>
    <div class="box">
      <div class="table">
        <table >
          <th >名称</th>
          <th>优惠券类型</th>
          <th>可使用商品</th>
          <th>使用门槛</th>
          <th>面值</th>
          <th>状态</th>
          <tbody>
              <td> {{ couponByIdState?.name }}</td>
              <td v-if="couponByIdState?.type===0">全场赠券</td>
              <td v-else-if="couponByIdState?.type===1">会员赠券</td>
              <td v-else-if="couponByIdState?.type===2">购物赠券</td>
              <td v-else-if="couponByIdState?.type===3">注册赠券</td>
              <td v-if="couponByIdState?.useType === 0">全场通用</td>
              <td v-else-if="couponByIdState?.useType === 1">指定分类</td>
              <td v-else-if="couponByIdState?.useType ===2">指定商品</td>
              <td>满{{couponByIdState?.minPoint}}元可用</td>
              <td>{{couponByIdState?.amount}}元</td>
              <td v-if="formateDate(couponByIdState?.endTime!)">未过期</td>
              <td v-else>已过期</td>
          </tbody>
          <th >有效期</th>
          <th>总发行量</th>
          <th>已领取</th>
          <th>待领取</th>
          <th>已使用</th>
          <th>未使用</th>
          <tbody>
              <td> {{ formateDate(couponByIdState?.startTime!) }}至{{ formateDate(couponByIdState?.endTime!) }}</td>
              <td>{{ couponByIdState?.publishCount }}</td>
              <td>{{ couponByIdState?.receiveCount }}</td>
              <td>{{couponByIdState?.publishCount!-couponByIdState?.receiveCount!}}</td>
              <td>{{couponByIdState?.useCount}}</td>
              <td>{{ couponByIdState?.publishCount!-couponByIdState?.useCount! }}</td>
          </tbody>
        </table>
      </div>
    <div class="searchj-box">
       <div class="row">
     <div class="left">
       <el-icon>
         <Search />
       </el-icon>
       <span>筛选搜索</span>
     </div>
     <div class="right">
       <el-button @click="reset">重置</el-button>
       <el-button type="primary" @click="queryCouponList">查询搜索</el-button>
     </div>
   </div>
   <el-form>
       <div class="Search-criteria">
               <el-form-item label="使用状态" style="padding-right: 30px;">
            <el-select  class="m-2" placeholder="全部" v-model="queryParams.useStatus">
    <el-option value="0" label="未使用"></el-option>
    <el-option value="1" label="已使用"></el-option>
    <el-option value="2" label="已过期"></el-option>
  </el-select>
        </el-form-item> 
       <el-form-item label="订单编号" >
           <el-input  placeholder="" v-model="queryParams.couponCode" style="width: 200px;" />
       </el-form-item> 
   </div>
   </el-form> 
</div>
</div>
<el-table
ref="multipleTableRef"
:data="list"
style="width: 1300px;margin: auto;"
@selection-change=""
border 
cell-class-name="align-c"
>
<el-table-column label="优惠码" prop="couponCode" align="center" />
<el-table-column label="领取会员" prop="memberNickname" align="center"/>
<el-table-column label="领取方式" prop="getType" align="center">
  <template #default="{row}">
    <div v-if="row.getType==1">
      主动获取
    </div>
  </template>
</el-table-column>
<el-table-column label="领取时间" prop="useType" align="center">
  <template #default="{row}">
    {{ formateDate(row.createTime) }}
  </template>
</el-table-column>
<el-table-column label="当前状态" prop="useStatus" align="center">
  <template #default="{row}">
    <div v-if="row.useStatus==0">
      未使用
    </div>
    <div v-else>
      已使用
    </div>
  </template>
</el-table-column>
<el-table-column label="使用时间" prop="useType" align="center">
  <template #default="{row}">
    {{ formateDate(row.useTime) }}
  </template>
</el-table-column>
<el-table-column label="订单编号" prop="orderId" align="center"/>

</el-table>
   <ElConfigProvider :locale="zhCn">
     <div class="page">
       <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
         :page-sizes="[5, 10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="total"
         @size-change="" @current-change="" />
     </div>
   </ElConfigProvider>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from "vue";
 import { getCouponHistoryList,getCouponById } from "./api";
 import { Search,Tickets } from "@element-plus/icons-vue"
 import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import { formateDate } from '@/utils'
 import { useRoute } from "vue-router";

 const route = useRoute()

 const reset = () => {
     if (queryParams.couponCode?.trim()||queryParams.useStatus?.trim()) {
         queryParams.couponCode = ''
         queryParams.useStatus = ''
     }
 }
 const queryParams = reactive<CouponHistoryListParams>({
    couponId:0,
    orderSn:'',
    useStatus:'',
    pageNum: 1,
    pageSize: 10,
    total:0,
    couponCode:''
 })
   
 const list = ref<CouponHistoryListModel[]>([]);
 const total = ref(0)
 const couponByIdState=ref<ConPonParams>()
//  console.log(route.query);
const queryCouponListById=()=>{
  getCouponById(parseInt(route.query.id as string)).then(res=>{
    if(res.code===200){
      console.log(res.data);
      couponByIdState.value=res.data
      console.log(couponByIdState);
      
    }
  })
}
const queryCouponList=()=>{
  getCouponHistoryList(queryParams,parseInt(route.query.id as string)).then(res=>{
      if(res.code===200){
        list.value=res.data.list
        total.value=res.data.total
      }
    })
}
queryCouponListById()
queryCouponList()
 </script>
 <style lang="less" scoped>
 .box{
    width: 1300px;
    margin: auto;
    .table {
      padding-bottom: 20px;
            .title {
                display: flex;
                align-items: center;

                .font-small {
                    font-size: 14px;
                    color: #606266;
                }
            }

            table {
                width: 100%;

                th {
                    border: 1px solid #dcdfe6;
                    padding: 10px;
                    font-size: 14px;
                    text-align: center;
                    background: rgb(242, 246, 252);
                    color: #303133;

                }

                td {
                    border: 1px solid #dcdfe6;
                    height: 60px;
                    line-height: 40px;
                    color: #606266;
                    overflow: hidden;
                    text-align: center;
                }

                .hid {
                    width: 141px;
                    height: 60px;
                    line-height: 40px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
            }
        }
 }
 .searchj-box {
   box-shadow: 0 0 4px #ccc;
   border-radius: 10px;
   padding: 20px;
   margin-bottom: 20px;
   .Search-criteria{
       display: flex;
   }
 
   .row {
     padding: 20px 0;
     display: flex;
 
     &:first-child {
       justify-content: space-between;
     }
 
     &:last-child {
       width: 400px;
 
       span {
         width: 100px;
       }
     }
   }
 }
 
 .page {
    width: 1300px;
    margin: auto;
   padding: 20px;
   display: flex;
   justify-content: flex-end;
 }
 
 :deep(.align-c) {
   .cell {
     text-align: center !important;
   }
 }
 .add-area {
   display: flex;
   justify-content: space-between;
   padding: 20px;
   margin-bottom: 20px;
   box-shadow: 0 0 4px #ccc;
   border-radius: 10px;
   .text{
     display: flex;
     align-items: center;
     span{
       padding-left: 10px;
     }
   }
 }
 </style>
 